<template>
  <div style="width: 50%;height: 40vh;">
    <div ref="chart" style="width:100%;height:100%;"></div>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from "echarts";
export default ({
  methods: {
    getEchartData(opt) {
      // const chart = this.$refs.chart
      // if(!chart){
      //   console.log("未获取到对应的DOM元素");
      //   return;
      // }
      if (echarts) {
        // const myChart = this.$echarts.init(chart)
        const myChart = echarts.init(echarts);
        const option = opt
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    init(dataX, dataY) {
      this.getEchartData({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '数据量',
          left: 'left',
          textStyle: {
            color: '#606060'
          }
        },
        xAxis: {
          type: 'category',
          data: dataX,
          axisLabel: {
            textStyle: {
              color: '#606060'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#606060'
            }
          }
        },
        series: [
          {
            data: dataY,
            type: 'bar',
            itemStyle: {
              color: '#F9D41C'
            }
          }
        ]
      })
    }

  },

})
</script>

